<style lang='scss'>
	.edit-title-dialog {
		.el-dialog__body {
			padding-bottom: 0;
		}
		.dialog-footer {
			display: flex;
	  	align-items: center;
	  	.remark-text {
	  		text-align: left;
	  		flex-grow: 1;
	  	}
		}
	}
</style>
<template>
	<el-dialog
	  :title="(is_modify?'修改':'添加')+'标题'"
	  class="edit-title-dialog edit-dialog"
	  :visible.sync="dialog_visible"
	  @closed="dialogClosedHandle"
	  width="40%">
	  <el-form class="cus-form">
  		<div class="row">
  			<el-form-item label="键名" :class="is_modify?'':'required'">
	  			<cusInput maxlength=12 :v_input.sync="form_data.id_key" :disabled="is_modify"></cusInput>
	  		</el-form-item>
	  		<el-form-item label="标题" class="required">
	  			<cusInput maxlength=12 :v_input.sync="form_data.label" :no_chinese="false"></cusInput>
	  		</el-form-item>
  		</div>
  		<div class="row">
  			<el-form-item label="权重" :class="is_modify?'required':''">
					<cusInput maxlength=4 :v_input.sync="form_data.z_index" type='number'></cusInput>
				</el-form-item>
				<el-form-item label="备注">
					<cusInput maxlength=20 :v_input.sync="form_data.remark" :no_chinese="false"></cusInput>
				</el-form-item>
  		</div>
  	</el-form>
  	<span slot="footer" class="dialog-footer">
  		<div style="flex-grow: 1;">
  			<p class="remark-text" style="margin: 0px;"><i class="el-icon-warning"></i>键名和标题都不可重复</p>
  			<p v-show="!is_modify" class="remark-text" style="margin: 3px 0px 0px 0px;"><i class="el-icon-warning"></i>键名宜短不宜长；
  			<span class="error-remark-text">键名添加后不可修改和删除</span></p>
  		</div>
	    <el-button @click="dialog_visible = false">取 消</el-button>
	    <el-button type="primary" @click="submitEdit" :loading="btn_loading">确 定</el-button>
	  </span>
  </el-dialog>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	export default {
		data() {
			return {
				dialog_visible: false,
				btn_loading: false,
				form_data: {
					id_key: '',
					label: '',
					z_index: '',
					remark: ''
				},
				data_bak: {}
			}
		},
		computed: {
			is_modify() {
				return Boolean(this.data_bak.id_key);
			}
		},
		methods: {
			show(title) {
				this.dialog_visible = true;
				this.initForm(title);
			},
			initForm(title={}) {
				this.form_data = {
					id_key: title.id_key || '',
					label: title.label || '',
					z_index: title.z_index || '',
					remark: title.remark || ''
				};
				this.data_bak = title;
			},
			submitEdit() {
				let this_form_data = Object.assign({}, this.form_data), send_data={}, this_is_modify = this.is_modify;

				if(this_form_data.id_key && this_form_data.label) {
					if(this_is_modify) {
						if(this_form_data.z_index==='') {
							this.$message.error('权重不能为空');
							return;
						}
						let this_data_bak = this.data_bak;
						for(let item in this_form_data) {
							if(this_data_bak[item] != this_form_data[item]) {
								send_data[item] = this_form_data[item];
							}
						}
						if(Object.keys(send_data).length == 0) {
							this.$message.error('请修改后提交');
							return;
						}
						send_data.id_key = this_form_data.id_key;
					}else {
						send_data = this_form_data;
						if(this_form_data.z_index === '') delete send_data.z_index;
						if(this_form_data.remark == '') delete send_data.remark;
					}
					
					this.btn_loading = true;
					this.$axios.post('/admin/'+(this.is_modify?'editSalaryKey':'addSalaryKey'), send_data).then(res => {
						if(res.s == 1) {
							if(this.is_modify) {
								this.$message.success('修改成功');
								this.$emit('refreshTb');
							}else {
								this.$message.success('添加成功');
								this.$emit('reloadTb');
							}
							this.dialog_visible = false;
						}
					}).finally(() => {
						this.btn_loading = false;
					})
				}else {
					this.$message.error('缺少必填参数');
				}
			},
			dialogClosedHandle() {
				this.initForm();
			}
		},
		components: {
			cusInput
		}
	}
</script>